import {Paper, Text, List, ListItem, Divider, Box, Group} from "@mantine/core";

export interface LogProps {
  version: string;
  datetime: string;
  content: string[];
}

const Log = ({log}: {log: LogProps}) => {
  return (
    <Box my="sm">
      <Text fw={700}>
        Ver: {log.version}（{log.datetime}）
      </Text>

      <List my="sm">
        {log.content.map((item) => (
          <ListItem key={item}>{item}</ListItem>
        ))}
      </List>
      <Divider />
    </Box>
  );
};

export const LogLists = ({logs}: {logs: LogProps[]}) => {
  return (
    <Paper px="sm" pb="sm">
      {logs.map((item) => (
        <Log key={item.version} log={item} />
      ))}
    </Paper>
  );
};
